<template>
  <div class="room-setting">
    <el-breadcrumb>
      <el-breadcrumb-item>房型管理</el-breadcrumb-item>
      <el-breadcrumb-item>房间设置</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <div class="item">
        <el-row>
          <el-col :span="1">
            <span class="item-label">楼号</span>
          </el-col>
          <el-col :span="20">
            <div v-for="(item,index) in buildingNumList"
              :key="index"
              class="item-box actived"
              style="padding:0 20px">
              {{item.num}}
              <span class="edit fa fa-pencil fa-fw"
                @click="editArea(item)"
                v-has="'adduparea'"></span>
              <span class="remove fa fa-remove"
                @click="_delete(item.id,'numId')"
                v-has="'rmbuilding'"></span>
            </div>
            <span class="add fa fa-plus"
              @click="addBulidingArea"
              v-has="'adduparea'"></span>
          </el-col>
        </el-row>
      </div>
      <div class="item">
        <el-row>
          <el-col :span="1">
            <span class="item-label">楼层</span>
          </el-col>
          <el-col :span="20">
            <div v-for="(item,index) in floorList"
              :key="index"
              class="item-box actived">
              {{item.floor}}
              <span class="edit fa fa-pencil fa-fw"
                @click="editFloor(item)"
                v-has="'addupfloor'"></span>
              <span class="remove fa fa-remove"
                @click="_delete(item.id,'floorId')"
                v-has="'rmbuilding'"></span>
            </div>
            <span class="add fa fa-plus"
              @click="addfloor"
              v-has="'addupfloor'"></span>
          </el-col>
        </el-row>
      </div>
      <div class="item">
        <el-row>
          <el-col :span="1">
            <span class="item-label">房型</span>
          </el-col>
          <el-col :span="20">
            <div v-for="(item,index) in roomTypeList"
              :key="index"
              class="item-box actived">
              <p>{{item.roomName}}
                <span class="edit fa fa-pencil fa-fw"
                  @click="editRoomType(item)"
                  v-has="'adduproomtype'"></span>
              </p>
              <p>押金：{{item.deposit}}</P>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="item">
        <el-row>
          <el-col :span="1">
            <span class="item-label">房间</span>
          </el-col>
          <el-col :span="20">
            <div v-for="(item,index) in roomList"
              :key="index"
              class="item-box actived">
              <p>{{item.title}}
                <span class="edit fa fa-pencil fa-fw"
                  @click="editRoom(item)"
                  v-has="'adduproom'"></span>
                <span class="remove fa fa-remove"
                  @click="_delete(item.id,'roomId')"
                  v-has="'rmbuilding'"></span>
              </p>
              {{item.roomType}}<img :src="item.qrCode"
                width="20"
                class="fr"
                style="margin-top:5px"
                @click="viewCode(item.qrCode)" />
            </div>
            <span class="add fa fa-plus"
              @click="addBulidingRoom"
              :style="{lineHeight:roomList.length? '60px':'auto'}"
              v-has="'adduproom'"></span>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 查看二维码 -->
    <el-dialog :title="title"
      :visible.sync="dialogCodeVisible"
      width="300px">
      <img :src="code"
        alt=""
        width="100%">
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="dialogCodeVisible =  false">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 楼号新增弹窗 -->
    <el-dialog :title="title"
      :visible.sync="dialogVisible"
      width="400px"
      @close="reset">
      <el-form>
        <el-form-item>
          <el-input auto-complete="off"
            v-model="iconText"
            ref="iconBox">
            <el-button slot="append"
              icon="fa fa-plus"
              @click="addIcon"></el-button>
          </el-input>
        </el-form-item>
        {{buildingId}}
      </el-form>
      <el-tag :key="index"
        v-for="(tag,index) in dynamicTags"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)">
        {{tag}}
      </el-tag>
      <span slot="footer"
        class="dialog-footer">
        <el-button type="primary"
          @click="sure">保存</el-button>
      </span>
    </el-dialog>
    <!-- 房间增加修改弹窗 -->
    <el-dialog :title="title"
      :visible.sync="dialogVisible3"
      width="400px"
      @close="reset">
      <el-form label-width="60px">
        <el-form-item label="房间号">
          <el-input auto-complete="off"
            v-model="roomName"
            ref="iconBox"
            placeholder="请输入房间号">
            <el-button slot="append"
              icon="fa fa-plus"
              @click.native="addRoomIcon"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="楼号">
          <el-select placeholder="请选择楼号"
            v-model="buildingId">
            <el-option v-for="item in buildingNumList"
              :key="item.id"
              :label="item.num"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼层">
          <el-select placeholder="请选择楼层"
            v-model="floorId">
            <el-option v-for="item in floorList"
              :key="item.id"
              :label="item.floor"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房型">
          <el-select placeholder="请选择房型"
            v-model="roomTypeId">
            <el-option v-for="item in roomTypeList"
              :key="item.id"
              :label="item.roomName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="门锁蓝牙">
          <el-input placeholder="请输入门锁蓝牙"
          v-model="bluetooth"
          maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item label="朝向">
          <el-select placeholder="请选择朝向"
            v-model="window">
            <el-option label="东"
              :value="1">
            </el-option>
            <el-option label="南"
              :value="2">
            </el-option>
            <el-option label="西"
              :value="3">
            </el-option>
            <el-option label="北"
              :value="4">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea"
            v-model="remark"
            placeholder="请输入房间描述"
            maxlength="20"></el-input>
        </el-form-item>
      </el-form>
      <span v-for="(tag,index) in dynamicTags" :key="index">
         <el-tag 
        closable
        :disable-transitions="false"
        @close="handleClose(tag)">
        {{tag.num}}
      </el-tag>
      </span>
     
      <span slot="footer"
        class="dialog-footer">
        <el-button type="primary"
          @click="sureRoom">保存</el-button>
      </span>
    </el-dialog>
    <!------- 修改弹窗------- -->
    <!-- 楼号修改  -->
    <el-dialog :title="title"
      :visible.sync="dialogVisible4"
      width="400px"
      @close="reset">
      <el-form>
        <el-form-item>
          <el-input auto-complete="off"
            v-model="editAreaText"
            ref="iconBox"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
        class="dialog-footer">
        <el-button type="primary"
          @click="editAreaSure">保存</el-button>
      </span>
    </el-dialog>

    <!-- 楼层修改  -->
    <el-dialog :title="title"
      :visible.sync="dialogVisible5"
      width="400px"
      @close="reset">
      <el-form>
        <el-form-item>
          <el-input auto-complete="off"
            v-model="editFloorText"
            ref="iconBox"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
        class="dialog-footer">
        <el-button type="primary"
          @click="editFloorSure">保存</el-button>
      </span>
    </el-dialog>
    <!-- 房型修改  -->
    <el-dialog :title="title"
      :visible.sync="dialogVisible6"
      width="400px"
      @close="reset">
      <el-form label-width="60px">
        <el-form-item label="房型名称">
          <el-input auto-complete="off"
            v-model="name"
            ref="iconBox"
            placeholder="请输入房型名称"
            :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="押金金额">
          <el-input auto-complete="off"
            v-model="pledgeMoney"
            ref="iconBox"
            placeholder="请输入押金金额"
            maxlength="7"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
        class="dialog-footer">
        <el-button type="primary"
          @click="editRoomTypeSure">保存</el-button>
      </span>
    </el-dialog>
    <!-- 房间设置 -->
    <el-dialog :title="title"
      :visible.sync="dialogVisible7"
      width="400px"
      @close="reset">
      <el-form label-width="60px">
        <el-form-item label="房间号">
          <el-input auto-complete="off"
            v-model="roomName"
            ref="iconBox"
            placeholder="请输入房间号"></el-input>
        </el-form-item>
        <el-form-item label="楼号">
          <el-select placeholder="请选择楼号"
            v-model="buildingId">
            <el-option v-for="item in buildingNumList"
              :key="item.id"
              :label="item.num"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼层">
          <el-select placeholder="请选择楼层"
            v-model="floorId">
            <el-option v-for="item in floorList"
              :key="item.id"
              :label="item.floor"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房型">
          <el-select placeholder="请选择房型"
            v-model="roomTypeId">
            <el-option v-for="item in roomTypeList"
              :key="item.id"
              :label="item.roomName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="门锁蓝牙">
          <el-input placeholder="请输入门锁蓝牙"
          v-model="bluetooth"
          maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item label="朝向">
          <el-select placeholder="请选择朝向"
            v-model="window">
            <el-option label="东"
              :value="1">
            </el-option>
            <el-option label="南"
              :value="2">
            </el-option>
            <el-option label="西"
              :value="3">
            </el-option>
            <el-option label="北"
              :value="4">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea"
            v-model="remark"
            placeholder="请输入房间描述"
            maxlength="20"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
        class="dialog-footer">
        <el-button type="primary"
          @click="editRoomSure">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getRoomSettingList,
  updateArea,
  deleteBuilding,
  updateFloor,
  updateRoom,
  updateRoomtype
} from "@/public/js/setting.js";
const Breadcrumb = () => import("@/components/common/Breadcrumb");
export default {
  name: "Staff",
  components: {
    Breadcrumb
  },
  data() {
    return {
      content: {
        firstTitle: "设置",
        secondTitle: "房间设置",
        type: "close"
      },
      code: "",
      buildingNumList: [], //楼号
      floorList: [],
      roomTypeList: [],
      roomList: [],
      title: "",
      id: "",
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      dialogVisible5: false,
      dialogVisible6: false,
      dialogCodeVisible: false,
      dynamicTags: [],
      iconText: "",
      buildingId: "", //楼号Id
      floorId: "", // 楼层ID
      roomTypeId: "", // 房型ID ,
      roomId: "", //房间号ID
      addType: "",
      textarea: "",
      name: "", //房型名称
      pledgeMoney: "", //押金
      roomName: "",
      remark: "",
      editAreaText: "",
      editFloorText: "",
      witchAdd: "",
      window: "",
      dialogVisible7: false,
      bluetooth: ""
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 查看二维码
    viewCode(code) {
      this.code = code;
      this.dialogCodeVisible = true;
    },
    getList() {
      getRoomSettingList().then(res => {        
        if (!res.data.errCode) {
          // 初始化数据
          this.buildingNumList = res.data.buildingNumList;
          this.floorList = res.data.floorList;
          this.roomTypeList = res.data.roomTypeList;
          this.roomList = res.data.roomList;
        }
      });
    },
    calculateArea(counts) {
      return counts;
    },
    //新增楼区
    addBulidingArea() {
      this.witchAdd = true;
      this.dialogVisible = true;
      this.title = "新增楼号";
      this.addType = "addArea";
    },
    //编辑楼号
    editArea(item) {
      this.title = "编辑楼号";
      this.editAreaText = item.num;
      this.id = item.id;
      this.dialogVisible4 = true;
    },
    editAreaSure() {
      let flag = false;
      this.buildingNumList.forEach(item => {
        if (item.num === this.editAreaText) {
          flag = true;
        }
      });
      if (flag) {
        this.$message.error("楼号名称已存在");
        return false;
      }
      let data = [
        {
          id: this.id,
          num: this.editAreaText
        }
      ];
      updateArea({ buildingNumAddEntity: data }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            message: "楼号编辑成功",
            type: "success"
          });
        }
        this.dialogVisible4 = false;
        this.getList();
      });
    },
    //编辑楼层
    editFloor(item) {
      this.title = "编辑楼层";
      this.dialogVisible5 = true;
      this.editFloorText = item.floor;
      this.id = item.id;
    },
    editFloorSure() {
      let flag = false;
      this.floorList.forEach(item => {
        if (item.floor === this.editFloorText) {
          flag = true;
        }
      });
      if (flag) {
        this.$message.error("楼层名称已存在");
        return false;
      }
      let data = [
        {
          id: this.id,
          floor: this.editFloorText
        }
      ];
      updateFloor({ buildingFloorAddList: data }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            message: "楼层编辑成功",
            type: "success"
          });
        }
        this.dialogVisible5 = false;
        this.getList();
      });
    },
    //编辑房型
    editRoomType(item) {
      this.title = "编辑房型";
      this.dialogVisible6 = true;
      this.name = item.roomName;
      this.pledgeMoney = item.deposit;
      this.id = item.id;
    },
    editRoomTypeSure() {
      let re = /[^\d.]/g;
      if (re.test(this.pledgeMoney)) {
        this.$message.error("请输入正确的格式");
        return false;
      }
      let data = [
        {
          id: this.id,
          pledgeMoney: this.pledgeMoney
        }
      ];
      updateRoomtype({ roomTypeList: data }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            message: "房型编辑成功",
            type: "success"
          });
        }
        this.dialogVisible6 = false;
        this.getList();
      });
    },
    // 编辑房间
    editRoom(item) {
      this.dialogVisible7 = true;
      this.title = "编辑房间";
      this.roomName = item.num;
      this.remark = item.remark;
      this.buildingId = item.buildingId;
      this.floorId = item.floorId;
      this.window = item.window;
      this.roomTypeId = item.roomTypeId;
      this.id = item.id;
      this.bluetooth = item.bluetooth;
    },
    editRoomSure() {
      let data = [
        {
          num: this.roomName,
          remark: this.remark,
          buildingId: this.buildingId,
          floorId: this.floorId,
          roomTypeId: this.roomTypeId,
          id: this.id,
          window: this.window,
          bluetooth: this.bluetooth
        }
      ];
      updateRoom({ roomAddList: data }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            message: "房间编辑成功",
            type: "success"
          });
        }
        this.dialogVisible7 = false;
        this.getList();
      });
    },
    //新增楼层
    addfloor(id) {
      this.witchAdd = false;
      this.dialogVisible = true;
      this.title = "新增楼层";
      this.addType = "addFloor";
    },
    //新增房型
    addBulidingRoomtype(buildingId, floorId) {
      this.dialogVisible2 = true;
      this.title = "新增房型";
      this.addType = "addRoomtype";
    },
    //新增房间
    addBulidingRoom() {
      this.dialogVisible3 = true;
      this.window = "";
      this.title = "新增房间";
    },
    addIcon() {
      let flag = false;
      if (this.iconText) {
        if (this.witchAdd) {
          this.buildingNumList.forEach(item => {
            if (item.num === this.iconText) {
              flag = true;
            }
          });
          if (flag) {
            this.$message.error("请勿新增相同的楼号名称");
            return false;
          }
        } else {
          console.log(this.floorList);
          this.floorList.forEach(item => {
            if (item.floor === this.iconText) {
              flag = true;
            }
          });
          if (flag) {
            this.$message.error("请勿新增相同的楼层");
            return false;
          }
        }

        if (this.dynamicTags.indexOf(this.iconText) > -1) {
          this.iconText = "";
          return false;
        }
        this.dynamicTags.push(this.iconText);
        this.iconText = "";
        this.$refs.iconBox.focus();
      }
    },
    addRoomIcon() {
      if (this.roomName) {
        if (!this.buildingId) {
          this.$message.error("请选择楼号");
          return false;
        } 
        else if (!this.floorId) {
          this.$message.error("请选择楼层");
          return false;
        } else if (!this.roomTypeId) {
          this.$message.error("请选择房型");
          return false;
        } else {
          var flag = false;
          for (let i = 0; i < this.dynamicTags.length; i++) {
            let itemData = this.dynamicTags[i];
            if (
              itemData.num == this.roomName &&
              itemData.buildingId == this.buildingId &&
              itemData.floorId == this.floorId
            ) {
              flag = true;
            }
          }
          if (flag) {
            this.$message.error("该房间已存在");
            return false;
          }
          this.dynamicTags.push({
            id: "",
            num: this.roomName,
            remark: this.remark,
            buildingId: this.buildingId,
            floorId: this.floorId,
            roomTypeId: this.roomTypeId,
            window: this.window,
            bluetooth: this.bluetooth
          });
        
          this.roomName = "";
          this.remark = "";
          this.buildingId = "";
          this.floorId = "";
          this.roomTypeId = "";
          this.window = "";
          this.bluetooth = "";
        }
      } else if (!this.roomName) {
        this.$message.error("请您输入房间号");
        return false;
      }
    },
    sureRoom() {
      console.log(" this.dynamicTags", JSON.stringify(this.dynamicTags));
      if (!this.dynamicTags.length) {
        this.$message.error("请增加房间信息");
        return false;
      }
      updateRoom({ roomAddList: this.dynamicTags }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            message: "房间新增成功",
            type: "success"
          });
        }
        this.dialogVisible3 = false;
        this.getList();
      });
    },
    reset() {
      this.iconText = "";
      this.name = "";
      this.pledgeMoney = "";
      this.dynamicTags = [];
      this.roomName = "";
      this.remark = "";
      this.editAreaText = "";
      this.editAreaText = "";
      this.buildingId = ""; //楼号Id
      this.floorId = ""; // 楼层ID
      this.roomTypeId = ""; // 房型ID ,
    },
    //新增保存
    sure() {
      if (this.addType === "addArea") {
        if (!this.dynamicTags.length) {
          this.$message.error("请增加楼区信息");
          return false;
        }
        let buildingNumAddEntity = [];
        this.dynamicTags.forEach(item => {
          buildingNumAddEntity.push({
            num: item
          });
        });
        updateArea({
          buildingNumAddEntity: buildingNumAddEntity
        }).then(res => {
          if (!res.data.errCode) {
            this.$message({
              message: "楼号新增成功",
              type: "success"
            });
          }
          this.dialogVisible = false;
          this.getList();
        });
      } else if (this.addType === "addFloor") {
        if (!this.dynamicTags.length) {
          this.$message.error("请增加楼层信息");
          return false;
        }
        let buildingFloorAddList = [];
        this.dynamicTags.forEach(item => {
          buildingFloorAddList.push({
            floor: item
          });
        });
        updateFloor({
          buildingFloorAddList: buildingFloorAddList
        }).then(res => {
          if (!res.data.errCode) {
            this.$message({
              message: "楼层新增成功",
              type: "success"
            });
          }
          this.dialogVisible = false;
          this.getList();
        });
      }
    },
    //删除
    _delete(id, type) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          switch (type) {
            case "numId":
              deleteBuilding({ numId: id }).then(res => {
                if (!res.data.errCode) {
                  this.$message({
                    type: "success",
                    message: "删除成功!"
                  });
                  //刷新
                  this.getList();
                }
              });
              break;
            case "floorId":
              deleteBuilding({ floorId: id }).then(res => {
                if (!res.data.errCode) {
                  this.$message({
                    type: "success",
                    message: "删除成功!"
                  });
                  //刷新
                  this.getList();
                }
              });
              break;
            case "roomId":
              deleteBuilding({ roomId: id }).then(res => {
                if (!res.data.errCode) {
                  this.$message({
                    type: "success",
                    message: "删除成功!"
                  });
                  //刷新
                  this.getList();
                }
              });
              break;
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    }
  }
};
</script>
<style lang="scss">
.room-setting {
  .el-input-group__append {
    background: #6d2377;
    border: none;
    color: #fff;
  }
  .content {
    padding: 20px;
    .item {
      margin-bottom: 30px;
      .item-label {
        display: block;
        line-height: 30px;
        text-align: center;
      }
      .item-box {
        padding: 0 15px;
        display: inline-block;
        border-radius: 3px;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
        background: #ddd;
        color: #fff;
        margin-right: 15px;
        margin-bottom: 10px;
        &.actived {
          background: #6d2377;
        }
      }
      .add {
        font-size: 20px;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        vertical-align: top;
      }
      .edit {
        margin-left: 15px;
      }
      .remove {
        margin-left: 15px;
      }
    }
  }
  .el-tag {
    margin-right: 15px;
  }
}
</style>
